<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="24" :md="15" :lg="15" :xl="15">
      <div ref="editor" class="text" /></el-col>
  </el-row>
</template>

<script>
import { mapGetters } from 'vuex'
import { upload } from '@/utils/upload'
import E from 'wangeditor'
export default {
  name: 'Editor',
  data() {
    return {
      editor: null
    }
  },
  computed: {
    ...mapGetters(['imagesUploadApi', 'baseApi'])
  },
  mounted() {
    const _this = this
    this.editor = new E(this.$refs.editor)
    // 自定义菜单配置
    this.editor.customConfig.zIndex = 10
    // 文件上传
    this.editor.customConfig.customUploadImg = function(files, insert) {
      // files 是 input 中选中的文件列表
      // insert 是获取图片 url 后，插入到编辑器的方法
      files.forEach((image) => {
        upload(_this.imagesUploadApi, image).then((res) => {
          const data = res.data
          const url = _this.baseApi + '/file/' + data.type + '/' + data.realName
          insert(url)
        })
      })
    }

    // 自定义菜单配置
    this.editor.customConfig.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'undo', // 撤销
      'redo' // 重复
    ]
    this.editor.create()
  },
  methods: {
    // 设置富文本
    set(html) {
      console.log(this.editor)

      this.editor.txt.html(html || '<p><br></p>')
    },
    // 获取富文本
    get() {
      console.log(this.editor)
      return this.editor.txt.html()
    }
  }
}
</script>

<style scoped>
.text table {
  border: 1px solid forestgreen;
}
.text {
  width: 600px;
  text-align: left;
}
::v-deep .w-e-text-container {
  height: 250px !important;
}
</style>
